<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>

<html>

<%@page import="domain.*"%>
<%@page import="java.util.*"%>
<%@page import="util.*"%>

<% 
	String scheduleId = (String) request.getAttribute("scheduleId");
	List <Mission> missions = (List<Mission>) request.getAttribute("missions");
%>
<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<link rel="icon" type="image/gif" href="./resources/images/animated_favicon1.gif">
	<!-- link rel="shortcut icon" href="favicon.ico" -->
	
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=th"></script>
<script type="text/javascript" src="./resources/center.js"></script>
<script type="text/javascript" src="./resources/googleAPI.js"></script>

<link href="./resources/jquery.mobile-1.0a3.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./resources/jquery.js"></script>
<script type="text/javascript" src="./resources/jquery.mobile-1.0a3.js"></script>

<style type="text/css">
html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map_canvas {
  height: 100%;
  width: 100%;
  position: absolute;
  bottom:0;
  left:0;
  right:0;
  top:0;
}
</style>

</script>
<title>Schedule On Map</title>
<script type="text/javascript">

var directionsService = new google.maps.DirectionsService();
	
	function init() {
		// GET POS
		getPOSLoop();
		
		// Get current driver's location
		getCurrentLocationLoop();
	}
	
	var t;
	function getCurrentLocationLoop(){
		// Update Driver's Location
		var request = createXMLHttpRequest();
		request.open('get','./AJAX?todo=getLocation&scheduleId=<%=scheduleId%>',false);
		request.send(null);
		var location = eval("(" + request.responseText + ")");
		if(location!=null){
			if(currentLocation!=null)
				currentLocation.setMap(null);
			cur_lo = new google.maps.LatLng(location.lat,location.lng);
		      
		    var image = './resources/images/car.png';
				currentLocation = new google.maps.Marker( {
				position :cur_lo,
				map :map,
				icon :image
			});
				
		    currentLocation.setAnimation(google.maps.Animation.BOUNCE);
			google.maps.event.addListener(currentLocation, 'click', toggleBounce);
		}
		t=setTimeout("getCurrentLocationLoop()",6000); // every minite;
	}
	
	function toggleBounce() {
	  if (currentLocation.getAnimation() != null) {
		  currentLocation.setAnimation(null);
	  } else {
		  currentLocation.setAnimation(google.maps.Animation.BOUNCE);
	  }
	}
	
	var markersArray = [];
	var t2=null;
	function getPOSLoop(){
		clearPin();
		var request = createXMLHttpRequest();
		
		request.open('get','./AJAX?todo=getMission&scheduleId=<%=scheduleId%>',false);
		request.send(null);
		var missions = eval("(" + request.responseText + ")");
		
		if(t2==null){
			var getTraffic = ""; //traffy or google
			createMap(missions.mission[0].toPosLat, missions.mission[0].toPosLng, "map_canvas", getTraffic, false);
		}
		
		var length = missions.mission.length;
		for(var i=0; i<length; i++){
			addMarker(missions.mission[i], i);
		}
		t2=setTimeout("getPOSLoop()",6000); // every minite;
	}
	
	function addMarker(mission, i){ 
		var pic = "";
		if(mission.status == '<%=MissionStatus.complete%>' )
			pic = 'icong'+(i+1)+'.png';
		else
			pic = 'iconr'+(i+1)+'.png';
		var image = './resources/images/mapIcons/'+pic;
		var marker = new google.maps.Marker( {
			position :new google.maps.LatLng(mission.toPosLat, mission.toPosLng),
			map :map,
			title :mission.toPosName,
			icon :image
		});

		var contentString = '<div id="content">' + '<div id="siteNotice">'
				+ '</div>' 
				+ '<font size="0.2ex;">'
				+ mission.toPosName
				+'</font>' + '<div id="bodyContent"></div>' 
				+ '</div>';
		var infowindow = new google.maps.InfoWindow( {
			content :contentString
		});

		google.maps.event.addListener(marker, 'click', function() {
			//infowindow.open(map, marker);
			$('#detailLink'+mission.priority).click();
		});
		
		markersArray.push(marker);
		
		//Update Status
		$('#mission'+mission.priority).html(mission.status+" "+mission.completetime);
		
	}
	
	function clearPin(){
	  // Deletes all markers in the array by removing references to them
	  if (markersArray) {
	    for (i in markersArray) {
	      markersArray[i].setMap(null);
	    }
	    markersArray.length = 0;
	  }
	}
</script>
</head>
<body onload="init()">
	<form id="homeSubmit">
		<input type="hidden" name="todo" value="home"/>
	</form>
	<div data-role="page" data-theme="a" id="mainPage" >
		<div data-role="content" >
			<%for(int j=0; j<missions.size(); j++){ 
				Mission mission = missions.get(j);
			%>
				<a id="detailLink<%=mission.getPriority()%>" href="#detail<%=mission.getPriority()%>" data-transition="fade" data-rel="dialog" style="display: none;"></a>
			<%
				}
			%>
			<div id="map_canvas" ></div>
		</div><!-- /content -->
	</div><!-- /page -->
	<%for(int j=0; j<missions.size(); j++){ 
		Mission mission = missions.get(j);
		List<Envelope> envelopes = mission.getEnvelopes();
	%>
	<div data-role="page" id="detail<%=mission.getPriority()%>" data-theme="a">

	<div data-role="header">
		<h1><%=mission.getToPOS().getName() %></h1>
	</div><!-- /header -->
	<div data-role="content">
		<ul data-role="listview" >
			<li>From: <%=mission.getFromPOS().getName() %></li>
			<li>To: <%=mission.getToPOS().getName() %></li>
			<li>Priority: <%=mission.getPriority()%></li>
			<li>Status: <span id="mission<%=mission.getPriority()%>"><%=mission.getStatus() %> <%= mission.getStatus().equals(MissionStatus.complete)? " "+DateUtil.getDDMMYYYYHHMMFromTimestamp(mission.getCompleteTime()):""%></span></li>
			<%for(int k=0; k<envelopes.size(); k++){ 
				Envelope envelope = envelopes.get(k);
			%>
				<li><%=envelope.getEnvelopId() %> 
					(<%=envelope.getEnvelopeType()!=EnvelopeType.transfer? envelope.getEnvelopeType():(envelope.getTransferFrom().getPosId()==mission.getToPOS().getPosId()? envelope.getEnvelopeType()+": pick":envelope.getEnvelopeType()+": drop")%>)
				</li>
			<%} %>
		</ul>	
	</div><!-- /content -->
	<div data-role="footer" class="ui-bar">
	</div><!-- /footer -->
	</div><!-- /page -->
		
	<%} %>
</body>
</html>